<template>
<el-card>
    <el-row type="flex" justify="center" align="top">
        <el-date-picker
            v-model="selectDate"
            type="month"
            :clearable="false"
            :editable="false"
            placeholder="选择日期"
        >
        </el-date-picker>
    </el-row>
    <el-calendar v-model="selectDate">
        <template v-slot:dateCell="{ date, data }" class="content">
            <div class="date-content">
                <span class="text"> {{ data.day | getDay }}</span>
                <span v-if="isWeek(date)" class="rest">休</span>
            </div>
        </template>
    </el-calendar>
</el-card>
</template>

<script>
export default {
	filters: {
		getDay(value) {
			const day = value.split('-')[2]
			return day.startsWith('0') ? day.substr(1) : day
		}
	},
	props: {
		startDate: {
			type: Date,
			default: () => new Date()
		}
	},
	data() {
		return {
			selectDate: '',
			currentMonth: null, // 当前月份
			currentYear: null, // 当前年份
			currentDate: null
		}
	},
	created() {
		this.selectDate = this.startDate
	},
	methods: {
		dateChange() {},
		// 是否是休息日
		isWeek(value) {
			return value.getDay() === 6 || value.getDay() === 0
		}
	}
}
</script>

<style scoped lang="scss">
	::v-deep.el-calendar__header {
		display: none;
	}

	.el-date-editor {
		::v-deep.el-input__inner {
			border: 0 !important;
			text-align: center;
			font-weight: bold;
			font-size: 20px;
		}
		::v-deep.el-input__prefix{
			display: none;
		}
	}
	.el-calendar {
		//transform: scale(0.9);
		::v-deep.el-calendar__header {
			display: none;
		}
		::v-deep.el-calendar__body{
			padding: 0;
		}
		.el-calendar-table {
			td.is-selected .text {
				background: #409eff;
				color: #fff;
				border-radius: 50%;
			}
		}
			::v-deep.el-calendar-day {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 50px;
			}

		.date-content {
			height: 40px;
			text-align: center;
			line-height: 40px;
			font-size: 18px;
			display: flex;
			align-items: center;
			position: relative;
		}
		.date-content .text {
			width: 40px;
			height: 40px;
			text-align: center;
			line-height: 40px;
			display: inline-block;
		}
		.date-content .rest {
			position: absolute;
			top: 0px;
			left: 20px;
			color: #fff;
			border-radius: 50%;
			background: rgb(250, 124, 77);
			width: 20px;
			height: 20px;
			line-height: 20px;
			display: inline-block;
			font-size: 12px;
			margin-left: 10px;
		}
	}
</style>
